<!--2 X 2 画面 多屏监控 -->
<template>
  <div class="main_compent-2-2">
    <div class="box_site22">
      <div v-for="item in playerPanels" class="div_site22" >
<!--        <PlayerContainer  :id="item.id"
                          :ref="item.ref"
                          :playerRef="item.playerRef"
                          :active="item.active"
                          :playParam="playParam"
                          @on-select-active = "onSelectActive"></PlayerContainer>-->
        <RtcWithTalkPlayer :id="item.id" :ref="item.ref" :active="item.active" :videoId = "item.playerRef" active
                           @on-select-active = "onSelectActive"
        />
      </div>


    </div>
  </div>
</template>
<script>
//import CommPlayer from "@/view/Home/component/CommPlayer";
import PlayerContainer from "@/view/Home/Moudle/multiscreenplay/PlayerContainer";
import RtcWithTalkPlayer from '@/view/Home/component/RtcWithTalkPlayer.vue'
export default {
  name: "MultiScr2X2",
  components:{PlayerContainer,RtcWithTalkPlayer},
  data(){
    return{
      activeId:-1,
      deviceData:null,
/*      active: 'border:1px solid #ff0000', //选中时的边框
      unActive: 'border:1px solid #14edc5', //没选中时的边框
      moveIn: 'border:1px solid #063ffc',//移入时边框
      currentBoxNum:-1, //当前选择框，-1是没有选择*/
      playerPanels:[ //播放面板
        {id:0,ref:'playerBox220',style:'border:1px solid #14edc5',playerRef:"jsPLayer220",active:true},
        {id:1,ref:'playerBox221',style:'border:1px solid #14edc5',playerRef:"jsPLayer221",active:false},
        {id:2,ref:'playerBox222',style:'border:1px solid #14edc5',playerRef:"jsPLayer222",active:false},
        {id:3,ref:'playerBox223',style:'border:1px solid #14edc5',playerRef:"jsPLayer223",active:false},
      ],
      playParam:{
        protocol: "flv",
        pringLog:false,
        isDebug:true,
        isFlv:true,
        videoBuffer:0.2, //缓存时长
        videoBufferDelay:1,
        useMSE:true,//MediaSource
        useSIMD:true, //WASM(SIMD)
        useWCS:false, //Webcodec
        useSIMDMThreading:true,//启动多线程（WASM,WASM(SIMD)解码支持）
        showOperateBtns: true, // 显示网速
        forceNoOffscreen: true, //显示性能
        renderDom:"video",
        isUseWebGPU:'webgpu',//webgl
        demuxUseWorker:false,//硬解码(MediaSource，Webcodec)worker解封装
      }
    }
  },
  methods:{
    onSelectActive(active,index){
      let player=null;
      if (active === false){
        this.activeId=-1;
        for(let i in this.playerPanels){
          player=this.$refs[this.playerPanels[i].ref][0];
          player.setActive(false);
        }
      }else{
        player=this.$refs[this.playerPanels[index].ref][0];
        this.activeId=index;
        player.setActive(true);
        for(let i in this.playerPanels){
          if (parseInt(i) !== index){
            player=this.$refs[this.playerPanels[i].ref][0];
            player.setActive(false);
          }
        }
      }



      //this.$refs[this.playerPanels[this.activeId].ref][0];

/*      this.playerPanels[index].active = active;
      if (active){
        this.activeId=index;
        for(let i in this.playerPanels){
          if (parseInt(i) !== index){

            if (this.playerPanels[i].active !== false){
              this.playerPanels[i].active = false;
            }
          }
        }
      }else{
        this.activeId=-1;
      }*/
/*      for(let i in this.playerPanels){
        this.playerPanels[i].active = active;
      }*/

      //console.log(">>>>>>MultiScr2X2.onSelectActive: active=%o,id=%o", active,index);
    },
    openDialog(data){
      this.deviceData = data;
      let player=null;
      if (this.activeId !== -1){
        //为何后面再加一个 [0], 还没搞懂
        player=this.$refs[this.playerPanels[this.activeId].ref][0];
        if (!player.isPlaying()){
          player.openDialog(
            data.arrt.deviceCode,
            data.arrt.channelCode,
            null,
            data.arrt.devName);
          return;
        }
      }else{
        // 没选中则一直向后找，哪个格子有空就播放
        for(let i in this.playerPanels){
          player = this.$refs[this.playerPanels[i].ref][0];
          //console.log(">>>>>>>>>>MultiScr2X2.play: i=%o; playerContainer=%o, isPlaying=%o, ref=%o", i,playerContainer,playerContainer.isPlaying(),playerContainer.getRef())
          console.log("******** >>>i=%o, isPlaying=%o",i,player.isPlaying())
          if (!player.isPlaying()){
            player.openDialog(
              data.arrt.deviceCode,
              data.arrt.channelCode,
              null,
              data.arrt.devName);
            return;
          }
        }
      }
    },
    /** BOX 点击事件  */
  /*
    click(number){
      for(let i in this.playerPanels){
        if (i == number){
          if (this.playerPanels[i].active){
            // 本来就选中的则取消
            this.playerPanels[i].active = false;
            this.playerPanels[i].style = this.unActive;
            this.currentBoxNum = -1;

          }else{
            // 没选中的就选中
            this.playerPanels[i].active = true;
            this.playerPanels[i].style = this.active;
            this.currentBoxNum = number;
          }
        }else{
          // 其它box 恢复原状态
          this.playerPanels[i].active = false;
          this.playerPanels[i].style = this.unActive;
        }
      }
    },
    /!** BOX 移入 事件 *!/
    mouseOver(number) {
      //console.log("mouseOver( %o )",number);
      //console.log("this.playerPanels[%o]: %o",number,this.playerPanels[number]);
/!*      if (!this.playerPanels[number].active){
        this.playerPanels[number].style = this.active;
      }*!/
      this.playerPanels[number].style = this.moveIn;
    },
    /!** BOX 移出 事件 *!/
    mouseLeave(number) {

      if (!this.playerPanels[number].active){
        this.playerPanels[number].style = this.unActive;
      }else{
        this.playerPanels[number].style = this.active;
      }
      //console.log("mouseLeave: %o",number);
    },
  */
    /** 给父组件 播放调用 */
    play(videoUrl,deviceId,channelId){
      //console.log(">>>>>>>>>>MultiScr2X2.play: activeId=%o",this.activeId)
      //选择可播放的 面板
      let playerContainer=null;
      if (this.activeId != -1){
        //为何后面再加一个 [0], 还没搞懂
        playerContainer=this.$refs[this.playerPanels[this.activeId].ref][0];
        if (!playerContainer.isPlaying()){
          playerContainer.play(videoUrl,deviceId,channelId);
          return;
        }
      }

      // 没选中则一直向后找，哪个格子有空就播放
      for(let i in this.playerPanels){
        playerContainer = this.$refs[this.playerPanels[i].ref][0];
        console.log(">>>>>>>>>>MultiScr2X2.play: i=%o; playerContainer=%o, isPlaying=%o, ref=%o",
          i,playerContainer,playerContainer.isPlaying(),playerContainer.getRef())
        if (!playerContainer.isPlaying()){
          playerContainer.play(videoUrl,deviceId,channelId)
          return;
        }
      }
    },
  },
  beforeDestroy(){},
  mounted() {
    this.activeId=-1;
  },
}
</script>
<style lang="less">
/*@import "src/view/template.less";*/
.main_compent-2-2{
  width:100%;
  height:100%;
}
.box_site22 {
  width: 100%;
  height: 100%;
  background-color: #000;
  display: flex;
  flex-wrap: wrap;
  .div_site22 {
    width: calc(100% / 2);
    height: calc(100% / 2);
    //border: 1px solid #14edc5;
    box-sizing: border-box;
    border-radius: 2px;
  }
}
</style>
